<template>
  <SysDialogVue
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onClose="onClose"
    @onConfirm="confirm"
  >
    <template v-slot:content>
      <!-- 角色列表 -->
      <el-table
        size="small"
        :height="tableHeight"
        :data="roleList.list"
        border
        stripe
      >
        <el-table-column width="50" align="center" label="选择">
          <template #default="scope">
            <el-radio
              v-model="selectRoleId"
              :label="scope.row.id"
              @change="getSlectRole(scope.row)"
              >{{ '' }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="parms.currentPage"
        :page-sizes="[1, 5, 20, 40, 80, 100]"
        :page-size="parms.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="parms.total"
        background
      ></el-pagination>
    </template>
  </SysDialogVue>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import SysDialogVue from '@/components/SysDialog.vue'
import useDialog from '@/hooks/useDialog'
// 引入操作自己（就是自己这个子组件）的方法
import useAssignRole from '@/composables/user/useAssignRole'
const { dialog, onClose, onShow } = useDialog()
const {
  confirm,
  show,
  roleList,
  parms,
  sizeChange,
  currentChange,
  tableHeight,
  selectRoleId,
  getSlectRole
} = useAssignRole(dialog, onClose, onShow)
defineExpose({
  show
})
</script>
<style scoped lang="scss">
.el-pagination {
  margin-top: 10px;
}
</style>
